<!--复印内容管理-->
<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//登录用户信息
const loginUser=ref({
  empName:''
})
//用于表格选择项计数的变量
const selections = ref(2);
//用于分页计页的变量
const currentPage=ref(1);
//每页条数
const pageSize=ref(10);
//新增模板弹窗
const dialogDisplay=ref(false);
//开局加载
onMounted(()=>{
  //loginUser.value=JSON.parse(localStorage.getItem('user'));
  //console.log(loginUser.value);
  loadContent();
})
//提示词
const tipLog=ref('新增成功！')
//弹窗标题
const dialogTitle=ref('新增复印模板')

//搜索表单
const searchForm=ref({
  id:'',
  name:'',
  status:''
})
//重置搜索表单
const resetSearch=()=>{
  searchForm.value={};
  loadContent();
}

//模板组
const contentTableData=ref([
  {
    name:'',
    status:'',
    createTime:'',
    createUser:''
  }
])
//获取模板列表
const loadContent=()=>{
  let data=qs.stringify(searchForm.value);
  axios.get(getBaseURL(1)+'/v1/duplicate/copy_content/select?'+data).then((response)=>{
    contentTableData.value=response.data.data;
  })
}

//修改模板表单
const contentForm=ref({
  id:'',
  name:'',
  status:'',
  createUser:''
})
//新增复印内容模板
const addContent=()=>{
  dialogTitle.value='新增复印模板';
  contentForm.createUser=loginUser.value.empName;
  let addData=qs.stringify(contentForm.value);
  axios.post(getBaseURL(1)+'/v1/duplicate/copy_content/update',addData).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success(tipLog.value)
      dialogDisplay.value=false;
      loadContent();
    }
    else ElMessage.error(response.data.msg);
  })
}
//删除指定模板
const deleteContent=(id)=>{
  if(confirm("确认删除？")) {
    axios.post(getBaseURL(1) + '/v1/duplicate/copy_content/delete/'+id).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success("删除成功！")
        loadContent();
      } else ElMessage.error(response.data.msg);
    })
  }
}
//修改指定模板
const updateContent=(contentId)=>{
  dialogTitle.value='修改复印模板';
  tipLog.value='修改成功！';
  searchForm.value={};
  searchForm.value.id=contentId;
  let data=qs.stringify(searchForm.value);
  axios.get(getBaseURL(1)+'/v1/duplicate/copy_content/select?'+data).then((response)=>{
    contentForm.value=response.data.data[0];
  })
  searchForm.value={};
  loadContent();
  dialogDisplay.value=true;
}

//弹窗控制
const handleClose=()=>{
  if(confirm("确认关闭？")){
    dialogDisplay.value=false;
    contentForm.value={};
  }
}
//状态项显示
const statusFormat=(row,column,cellValue,index)=>{
  if(cellValue=='0') cellValue='未启用';
  else if(cellValue=='1') cellValue='启用';
  return cellValue;
}
</script>

<template>
  <div style="background-color:#F0F2F5;padding: 0;width: 100%;height: 100%;">
    <el-card shadow="never" style="background-color:#fff;padding:20px 0;width: 90%;height:80px;margin: 0 auto 20px auto;">
      <!--搜索项-->
      <el-form label-width="auto">
        <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
          <el-col :span="8">
            <el-form-item label="内容名称">
              <el-input style="width: 200px" placeholder="请输入" v-model="searchForm.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select style="width: 200px;" placeholder="请选择" default-first-option v-model="searchForm.status">
                <el-option label="未启用" value="0"/>
                <el-option label="启用" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" style="float: right;margin-left: 10px;" @click="loadContent"><el-icon style="margin-right: 5px;"><Search/></el-icon>搜索</el-button>
            <el-button style="float: right;" @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" style="background-color:#fff;padding:20px 0;width: 1150px;margin: 0 auto;">
      <el-button type="primary" style="float: right;" @click="dialogDisplay=true">新增模板</el-button>
      <!--新增复印内容弹窗-->
      <el-dialog v-model="dialogDisplay" :before-close="handleClose" style="width:500px;text-align: left;border-radius: 10px;padding: 30px;position:relative;left:5%;">
        <template #header>
          <span style="font-weight: bold;">{{dialogTitle}}</span>
        </template>
        <el-form label-width="80px" label-position="left">
          <el-row :gutter="30" style="margin: 0 auto;">
          <el-form-item label="内容名称">
            <el-input style="width: 300px" placeholder="请输入" v-model="contentForm.name"/>
          </el-form-item>
          </el-row>

          <el-row :gutter="30" style="margin: 0 auto;">
          <el-form-item label="状态">
            <el-radio-group v-model="contentForm.status">
              <el-radio value='1'>启用</el-radio>
              <el-radio value='0'>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="16"/>
            <el-col :span="4">
              <el-button @click="handleClose">取消</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="addContent">确认</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <el-table :data="contentTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" >
        <el-table-column type="selection" v-model="selections"/>
        <el-table-column label="内容名称" property="name"/>
        <el-table-column label="状态" property="status" show-overflow-tooltip :formatter="statusFormat"/>
        <el-table-column label="记录人" property="createUser"/>
        <el-table-column label="记录时间" property="createTime"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="updateContent(scope.row.id)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteContent(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;" layout="prev,pager,next" v-model:page-size="pageSize" :total="contentTableData.length" v-model:current-page="currentPage"/>
    </el-card>
  </div>
</template>

<style scoped>

</style>